/* 页面基础设置 */
body {
    font-family: Arial, sans-serif;
    background-color: #333;
    color: #fff;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 容器样式 */
.container {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding-bottom: 60px; /* 给底部导航栏留出空间 */
}

/* 顶部导航栏 */
.navbar {
    width: 100%;
    max-width: 1500px;
    background-color: #444;
    padding: 10px;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    gap: 10px;
    border-radius: 8px;
}
.profile-picture {
    height: 40px;  /* 根据需要设置高度 */
    width: 40px;  /* 自动调整宽度，保持图片的宽高比 */
    object-fit: cover;  /* 确保图片以适当的方式覆盖元素 */
    object-position: center;  /* 确保图片居中显示 */
    border-radius: 50%;  /* 如果需要使图片为圆形，可以使用边框半径 */
}

.navbar input {
    flex: 1;
    padding: 8px 12px 8px 32px; /* 左侧留出空间给图标 */
    border-radius: 20px;
    border: none;
    max-width: 100%;
    background-color: #f2f2f2; /* 输入框背景色 */
    background-image: url('/static/search-icon.svg'); /* 本地 SVG 文件路径 */
    background-size: 16px 16px; /* 图标大小 */
    background-repeat: no-repeat;
    background-position: 10px center; /* 图标位置 */
    color: #666;
}

.navbar button {
    padding: 10px 20px; /* 增加按钮的内边距 */
    border-radius: 30px; /* 与输入框一致的圆角 */
    border: none; /* 移除按钮的默认边框 */
    background-color: #3e3f41; /* 按钮的背景色，使用蓝色使其更明显 */
    color: #fff; /* 按钮文字颜色 */
    cursor: pointer; /* 鼠标悬停时显示为指针 */
    transition: background-color 0.3s, box-shadow 0.3s; /* 添加过渡效果 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 与输入框相似的阴影 */
}

.navbar button:hover {
    background-color: #616161; /* 鼠标悬停时更深的蓝色 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 增强阴影效果 */
}

/* 主内容区（卡片区域） */
.content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 自适应两列布局 */
    gap: 20px;
    width: 100%;
    max-width: 1500px;
    margin-top: 20px ;
}

/* 卡片样式 */
.card {
    background-color: #555;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.card img {
    width: 100%;
    border-radius: 8px;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
}

.tag {
    background-color: #666;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
}

/* 底部导航栏 */
.bottom-nav {
    width: 100%;
    background-color: #444;
    padding: 10px;
    display: flex;
    justify-content: space-around;
    position: fixed; /* 固定在页面底部 */
    bottom: 0;
    left: 0;
    border-top: 1px solid #555;
}

.bottom-nav a {
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: center;
    padding: 8px 0; /* 适当上下内边距 */
}

.bottom-nav a:hover {
    background-color: #555; /* 鼠标悬停效果 */
}

.nav-icon {
    width: 24px; /* 控制图标大小 */
    height: 24px;
    margin-bottom: 4px; /* 图标和文字之间的间距 */
}

a {
    color: inherit; /* 继承父元素的颜色 */
    text-decoration: none; /* 去掉下划线 */
}
/* 推荐区容器，与主内容类似，但只显示2行 */
.recommendation-container {
    width: 100%;
    max-width: 1500px;
    margin-top: 20px;
}

/* 推荐列表：与 .content 类似，但固定2行 */
.recommendation-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    /* 只允许 2 行，因此若有更多项目，只取前 2*colCount 个 */
    grid-template-rows: repeat(2, auto);
    gap: 20px;
    width: 100%;
    margin-top: 10px;
    /* 若想隐藏超出的项目，也可加:
       overflow: hidden; 
       height: XXXpx; (但通常不推荐硬编码高度)
    */
}

/* 推荐卡片样式可与原 .card 保持一致，也可单独调色 */
.recommended-card {
    background-color: #555;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

